<template>
    <div class='commonListComplex' v-loading="loading">
        <button-bar :buttonJson="buttonJson" @btn-click="btnClick"></button-bar>
        <search @search-event="searchEvent" :searchStr="searchStr"  ref="searchs" v-if="searchStr.length>0"></search>
        <div class='list'>
            <el-row v-for="count in row" :key="count" class='listComplex_row'>
                <el-col :span="lists[(count-1)*col+count2-1].width" v-for="count2 in col" :key="count2" class='listComplex_col'>
                    <commonList noclick="N" :model="model" ref="commonList" :model_key="lists[(count-1)*col+count2-1].modelKey" hidenSearch='Y' :searchJson="searchStr2" sKey=""  @rowDbClick="rowDbClick"  :company="company"  searchs="" listnames=''  @rowClick="rowClick" @rowMultiClick="rowMultiClick" :appid="appid"></commonList>
                </el-col>
            </el-row>
        </div>
         
        
    </div>
</template>
<script>
import commonList  from './commonList.vue'
import ButtonBar  from './ButtonBar.vue'
import search  from './search.vue'
export default {
    name:'commonListComplex2',
    props:['sKey','sOtherKey','row','company','appid','model_key','model'],
    components: {
        commonList,
        ButtonBar,
        search
    },
    data(){
        return{
            lists:[],
            sKey2:'',
            searchs:'',
            buttonJson:[],
            col:0,
            searchStr:[],
            searchStr2:[],
            loading:true,
            curRow:null,
            curRows:null
        }
    },
    created(){

        
        
        this.$post(this.appid,"api/view/commonListComplexJson",{
            sKey:this.sKey,
            sOtherKey:
            this.sOtherKey,
            key:escape(this.model_key),
            model:escape(this.model)
        }).then(data=>{
            this.lists=data.list;
            this.buttonJson=data.buttonJson;
            this.col=Number(data.col);
            this.searchStr=data.searchJson;
            this.searchStr2=data.searchJson;
            this.loading=false;
        })
    }, 
    mounted(){
        if(this.row>1){
            let el=document.getElementsByClassName("listComplex_row");
            let height=document.getElementsByClassName("list")[0].offsetHeight;
            for(let i=0;i<el.length;i++){
              //  el[i].style.height=(height/2-40)+'px';
                el[i].style.flexDirection= "column";

            }
        }else{
            let el=document.getElementsByClassName("listComplex_row");
            let height=document.getElementsByClassName("list")[0].offsetHeight;
            for(let i=0;i<el.length;i++){
                //el[i].style.height=(height)+'px';
                el[i].style.flexDirection= "row";
                let el_=el[i].getElementsByClassName("el-col");
                for(let h=0;h<el_.length;h++){
                    el_[h].style.paddingRight="5px"
                }
            }
            
            
        }
    },
    methods:{
        rowDbClick(data){
            this.curRow=JSON.parse(data);
            this.curRow.rowIndex=this.index;
            this.$emit("rowDbClick",JSON.stringify(this.curRow));
        },
         searchEvent(data){
           this.searchStr2=JSON.parse(data);
            
        },
        rowClick(data){
            this.curRow=JSON.parse(data);
            this.$emit("rowClick",data);
            
        },
        rowMultiClick(data){
            this.curRows=JSON.parse(data);
            this.$emit("rowMultiClick",data);
        },
        goSearch(){
            let el=this.$refs.commonList;
            for(let i=0;i<el.length;i++){
                el[i].goSearch();
            }
        },
       getScrollTop(){
            let tops="";
            let el=this.$refs.commonList;
            for(let i=0;i<el.length;i++){
                let top= el[i].getScrollTop();
                tops=tops+top+","
            }
            tops=tops.substring(0,tops.length-1);
            return tops;
        },
        setScrollTop(top){
            let el=this.$refs.commonList;
            let tops=top.split(",");
            for(let i=0;i<tops.length;i++){
                if(el.length>i){
                    el[i].setScrollTop(tops[i])
                }
            }
        },
        initData(){
            let el=this.$refs.commonList;
            for(let i=0;i<el.length;i++){
                el[i].initData();
            }
           
        },
    } 
}
</script> 
<style scoped>
    .commonListComplex{
        height:100%;
        width:100%;
        display: flex;
        flex-direction: column;

        overflow:hidden;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding:10px;
    } 
    .list{
        flex:1;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        padding-top:10px;
        display:flex;
        flex-direction: column;
    }
    .listComplex_row{
        overflow:hidden;
        display:flex;
        flex:1;
        flex-direction: column;
    }
    .el-col{
        padding:5px 5px 5px 0;
        flex:1;
    }
  
   
</style>